<template>
  <div>
    <a-modal
      :maskClosable="false"
      :title="title"
      centered
      :width="1000"
      v-model="visible"
      :footer="null"
      :bodyStyle="{ paddingTop: '10px' }"
    >
      <div class="_pb-10">
        <a-button type="primary" @click="openGroup()">新增分组</a-button>
      </div>
      <a-table size="default" rowKey="id" :columns="columns" :data-source="groupData" :rowSelection="null" :pagination="false">
        <!-- 序号 -->
        <span slot="serial" slot-scope="text, record, index">
          {{ parseInt(index) + 1 }}
        </span>
        <!-- 操作 -->
        <span slot="action" slot-scope="text, record">
          <template>
            <a-button type="primary" ghost size="small" class="_mr-5" @click="openGroup(record)">
              编辑
            </a-button>
            <a-button type="primary" ghost size="small" class="_mr-5" @click="handDelete(record)">
              删除
            </a-button>
          </template>
        </span>
      </a-table>
    </a-modal>

    <a-modal :maskClosable="false" :title="groupTitle" centered :width="600" v-model="groupVisible" @ok="submit">
      <a-form-model :model="groupForm" :rules="rules" ref="ruleForm" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-model-item label="名称：" prop="name">
          <a-input v-model.trim="groupForm.name" placeholder="请输入分组名称" />
        </a-form-model-item>
        <a-form-model-item label="排序：">
          <a-input-number style="width:100%;" v-model="groupForm.sort" :min="1" :max="10000" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import STable from '@/components/Table'
import { addTagGroup, updateTagGroup, delTagGroup } from '@/api/member/grouping'
export default {
  components: {
    STable
  },
  props: ['groupData'],
  data() {
    return {
      visible: false,
      title: '分组管理',
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '分组名称',
          dataIndex: 'name',
          width: '80px',
          ellipsis: true
        },
        {
          title: '排序',
          dataIndex: 'sort',
          width: '80px'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '180px'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '120px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      groupTitle: '',
      groupVisible: false,
      groupForm: {
        name: '',
        sort: 1,
        id: undefined
      },
      type: '1',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      rules: {
        name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    show(type) {
      this.type = type
      this.visible = true;
    },
    openGroup(row) {
      if (row) {
        this.groupTitle = '编辑分组'
        this.groupForm.id = row.id
        this.groupForm.name = row.name
        this.groupForm.sort = row.sort
      } else {
        this.groupTitle = '新增分组'
        Object.assign(this.$data.groupForm, this.$options.data().groupForm)
      }
      this.groupVisible = true
    },
    // 新增||编辑分组
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.groupForm.id) {
            updateTagGroup({type: this.type, ...this.groupForm}).then(() => {
              this.$message.success('修改成功');
              this.$emit('refreshGroup');
              this.groupVisible = false;
            })
          } else {
            addTagGroup({type: this.type, ...this.groupForm}).then(() => {
              this.$message.success('新增成功');
              this.$emit('refreshGroup');
              this.groupVisible = false;
            })
          }
        }
      })
    },
    // 删除分组
    handDelete(row){
      const _that = this;
      _that.$confirm({
        title: `确认删除分组?`,
        content: `删除该分组后,该分组下的标签一并删除,确认删除${row.name}吗?`,
        centered: true,
        onOk() {
          delTagGroup({id: row.id}).then(()=>{
            _that.$message.success('删除成功');
            _that.$emit('refreshGroup');
          })
        },
        onCancel() {},
      });
    }
  }
}
</script>

<style lang="less" scoped></style>
